<template>
  <div>
    <el-form :model="searchList" ref="searchList">
      <el-row :gutter="20">
        <el-col :span="3" :offset="0">
          <el-form-item label>
            <el-select
              v-model="searchList.apply_batch"
              value-key="apply_batch"
              placeholder="申报批次"
              clearable
            >
              <el-option
                v-for="item in apply_batch_list"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="0">
          <el-form-item label>
            <el-input v-model="searchList.apply_company_name" placeholder="申报单位" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="0">
          <el-form-item label>
            <el-select
              v-model="searchList.issue_status"
              value-key="issue_status"
              placeholder="需求确认书状态"
              clearable
            >
              <el-option
                v-for="item in issue_status_list"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="0">
          <el-select v-model="searchList.data_status" placeholder="数据状态" clearable>
            <el-option
              v-for="item in data_status_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-button
          type="primary"
          size="medium"
          @click="search"
          :loading="loading"
          style="margin-top: 3px;"
        >查询</el-button>
      </el-row>
    </el-form>
    <el-table
      :data="tableData.results"
      ref="table"
      border
      stripe
      :height="offsetHeight"
      v-loading="loading"
      row-key="id"
      style="width: 1400px"
    >
      <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
      <el-table-column prop="apply_batch" label="申报批次" min-width="100" align="center"></el-table-column>
      <el-table-column prop="apply_company_name" label="申报单位" min-width="230" align="center"></el-table-column>
      <el-table-column prop="apply_company_code" label="申报单位账号" min-width="230" align="center"></el-table-column>
      <el-table-column
        prop="all_project_audited_status"
        label="未填报审核资金项目数量"
        min-width="150"
        align="center"
      ></el-table-column>
      <!--      <el-table-column label="所有项目都已填报审核资金" width="130" align="center">-->
      <!--        <template slot-scope="{row}">-->
      <!--          <el-tag type="danger" size="medium" v-if="row.all_project_audited_status ===0">是</el-tag>-->
      <!--          <el-tag type="success" size="medium" v-else-if="row.all_project_audited_status !='0'">否</el-tag>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column label="需求确认书状态" width="200" align="center">
        <template slot-scope="{row}" v-if="row.issue_status">
          <el-tag type="success" size="medium" v-if="row.issue_status ==='000'">咨询机构未生成</el-tag>
          <el-tag type="warning" size="medium" v-else-if="row.issue_status ==='00'">咨询机构未上传</el-tag>
          <el-tag type="warning" size="medium" v-else-if="row.issue_status ==='0'">咨询机构未下发</el-tag>
          <el-tag type="warning" size="medium" v-else-if="row.issue_status ==='1'">申报单位未回传</el-tag>
          <el-tag type="warning" size="medium" v-else-if="row.issue_status ==='2'">申报单位未确认</el-tag>
          <el-tag type="warning" size="medium" v-else-if="row.issue_status ==='3'">咨询机构未审批</el-tag>
          <el-tag type="warning" size="medium" v-else-if="row.issue_status ==='4'">已审批通过</el-tag>
          <el-tag type="warning" size="medium" v-else-if="row.issue_status ==='5'">已驳回</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="issue_date" label="下发时间" min-width="100" align="center"></el-table-column>
      <el-table-column prop="upload_date" label="回传时间" min-width="100" align="center"></el-table-column>
      <el-table-column prop="examine_date" label="审核时间" min-width="100" align="center"></el-table-column>
      <el-table-column prop="reason" label="驳回原因" width="150" align="center"></el-table-column>
      <el-table-column label="数据状态" width="150" align="center">
        <template slot-scope="{row}" v-if="row.data_status">
          <el-tag type="warning" size="medium" v-if="row.data_status ==='1'">当前</el-tag>
          <el-tag type="warning" size="medium" v-else-if="row.data_status ==='0'">历史</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="350" fixed="right" align="center">
        <template slot-scope="{row}">
          <el-row type="flex" justify="center" style="margin: auto 0;">
            <el-button
              type="primary"
              size="mini"
              @click="exportItem(row)"
              v-if="row.all_project_audited_status ===0&&(row.issue_status ==='000'||row.issue_status ==='00'||row.issue_status ==='0')"
            >生成确认书</el-button>

            <el-upload
              style="margin-left: 10px;"
              class="upload-demo"
              action
              :http-request="httpRequest"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :before-upload="handleBeforeUpload"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :show-file-list="false"
              v-if="row.issue_status === '00'||row.issue_status === '0'"
            >
              <el-button type="primary" size="mini" @click="getInfo(row)">上传确认书</el-button>
            </el-upload>

            <el-button
              style="margin-left: 10px;"
              type="primary"
              size="mini"
              @click="sendReport(row.id)"
              v-if="row.issue_status ==='0'"
            >下发</el-button>
            <el-button
              style="margin-left: 10px;"
              type="primary"
              size="mini"
              @click="searchUploadedDoc(row.confirmmation_file)"
              v-if="row.issue_date.length >0"
            >查看下发</el-button>
            <el-button
              style="margin-left: 10px;"
              type="primary"
              size="mini"
              @click="downLoadItem(row.confirmmation_file_apply)"
              v-if="row.confirmmation_file_apply.length>0 && (row.issue_status ==='3'|| row.issue_status ==='4'|| row.issue_status ==='5')"
            >查看回传</el-button>

            <el-button
              style="margin-left: 10px;"
              type="primary"
              size="mini"
              @click="checkInfo(row.id)"
              v-if="row.issue_status ==='3'"
            >审批</el-button>
            <el-button
              style="margin-left: 10px;"
              type="primary"
              size="mini"
              @click="setDataDisable(row.id)"
              v-if="row.issue_status!='000' && row.issue_status!='5'"
            >强制驳回</el-button>
          </el-row>

          <!--  下发按钮 all_project_audited_status=1 无待办项目，则可以-->
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        @size-change="pageSizeChange"
        @current-change="pageNoChange"
        :page-sizes="[10, 50, 100, 200]"
        :page-size="10"
        background
        layout="total, sizes, prev, pager, next"
        :total="tableData.totalRecord"
      ></el-pagination>
    </div>
    <el-dialog title="审批" :visible.sync="dialogVisible" width="30%">
      <el-form :model="companyList" ref="companyList" label-width="100px" size="normal">
        <el-form-item label="审核结果">
          <el-select v-model="companyList.issue_status" value-key="issue_status" placeholder>
            <el-option label="通过" value="4"></el-option>
            <el-option label="驳回" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="驳回原因" v-if="companyList.issue_status === '5'">
          <el-input v-model="companyList.reason"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="requirementFromApplyClick">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="需求确认书" :visible.sync="dialogDisVisible" width="30%">
      <el-form :model="companyList" ref="companyList" label-width="120px" size="normal">
        <el-form-item label="强制驳回说明：">
          <font color="red">强制驳回后该申报单位的需求确认书需要重新下发、回传、确认和审批，请慎重强制驳回操作！</font>
        </el-form-item>
        <el-form-item label="强制驳回原因：">
          <el-input v-model="companyList.reason" type="textarea"
                    :autosize="{ minRows: 1, maxRows: 10 }"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDisVisible = false">取 消</el-button>
        <el-button type="primary" @click="requirementDis">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 报告导出模板 -->
    <requirement-report ref="requirementReport" v-show="false"></requirement-report>
  </div>
</template>
<script>
import ProjectItem from '@/components/Project'
import ContractItem from '@/components/Contract'
import FlowItem from '@/components/FlowChart'
import { f_submitTtypeRename } from '@/utils/filters.js'
import { issue_status_list,apply_batch_list,data_status_list } from '@/utils/dicts.js'
import { mapGetters } from "vuex";
import RequirementReport from '@/components/Report/RequirementReport'
export default {
  name: 'NotFinish',
  components: {
    ProjectItem, ContractItem, FlowItem, RequirementReport
  },
  props: {
    switch: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    status: {
      type: String,
      default: () => {
        return ''
      }
    },
  },
  data () {
    return {
      companyList: {},
      dialogVisible: false,
      dialogDisVisible: false,
      offsetHeight: document.documentElement.clientHeight - 260,
      searchList: {
        data_status: '1'
      },
      loading: false,
      tableData: [],
      projectShow: false,
      projectParams: {},
      contractShow: false,
      contractParams: {},
      issue_status_list: issue_status_list,
      apply_batch_list: apply_batch_list,
      data_status_list: data_status_list,
      flowShow: false,
      flowParams: {},
      isExpand: false,
      pageNo: '1',
      pageSize: '10',
      rowData: {}
    }
  },
  created () {

  },
  mounted () {

    this.init()
  },
  methods: {
    searchUploadedDoc (url) {
      this.saveLoading = true
      window.open(url)
      this.saveLoading = false
    },
    getInfo (row) {
      this.rowData = row
    },
    //审批
    checkInfo (id) {
      this.companyList.id = id
      this.dialogVisible = true
    },
    async httpRequest (file) {
      let fileName = ''
      let point = file.file.name.lastIndexOf('.')
      const timestamp = new Date().getTime();
      const random = Math.floor(Math.random() * 999999);
      // 时间戳 + 6位随机数
      fileName = timestamp + random + file.file.name.slice(point, file.file.name.length)
      const res = await this.$http('uploadSign', {
        fileName: fileName,
        filePath: 'house/Wl',
        timestamp: timestamp
      })
      const sign = res.sign
      let reader = new FileReader();
      reader.readAsDataURL(file.file);
      reader.onload = async (e) => {
        this.loading = true
        const file = e.target.result.substring(e.target.result.indexOf(',') + 1);
        const res1 = await this.$http('uploadBase', {
          fileName: fileName,
          filePath: 'house/Wl',
          timestamp: timestamp,
          sign: sign,
          file: file,
        })
        if (res1) {
          this.$http('uploadRequirementFromThird', {
            id: this.rowData.id,
            confirmmation_file: res1
          }).then(res => {
            this.loading = false
            this.$message.success('上传成功');
            this.init()
          })
        } else {
          this.loading = false
          return
        }
        this.loading = false
      }
    },
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    handlePreview (file) {
      console.log(file);
    },
    handleExceed (files, fileList) {
      this.$message.warning(`只能上传一个文件！`);
    },
    beforeRemove (file, fileList) {
      // return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleBeforeUpload (file) {
      console.log('file===', file)
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      // .jpg,.jpeg,.png,.pdf,.PDF
      const extension4 = testmsg === 'docx'
      if (!extension4) {
        this.$message({
          message: '上传文件只能是.docx !',
          type: 'warning'
        })
        return false
      } else {
        return true
      }
    },
    requirementFromApplyClick () {
      if (this.companyList.issue_status === undefined) {
        this.$message.success('请选择审核结果');
        return
      }
      if (this.companyList.issue_status === '4') {
        this.companyList.reason = '';
      }
      this.$http('examineRequirementFromThird', {
        ...this.companyList
      }).then(res => {
        this.dialogVisible = false
        this.init()
        this.$message.success('审核成功');
      })
    },
    requirementDis () {
      if (this.companyList.reason === undefined) {
        this.$message.success('请输入驳回原因');
        return
      }
      this.$http('updateRequirementByProjectId', {
        ...this.companyList
      }).then(res => {
        this.dialogDisVisible = false
        this.init()
        this.companyList.reason =''
        this.$message.success('操作成功');
      })
    },
    async init () {
      this.loading = true
      const res = await this.$http('findListForThirdCheckCompany', {
        company_code: this.user.company_code,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        ...this.searchList
      })
      this.tableData = res
      this.loading = false
    },
    search () {
      this.isExpand = true
      this.init()
    },
    pageNoChange (pageNo) {
      this.pageNo = pageNo
      this.init()
    },
    pageSizeChange (pageSize) {
      this.pageSize = pageSize
      this.init()
    },
    sendReport (id) {
      this.$confirm('确定下发需求确认书吗?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$http('insertIssueForThird', {
          id: id
        }).then(res => {
          console.log("res::::" + res)
          this.init();
        })

      }).catch(() => {

      });

    },
    setDataDisable (id) {
      this.$confirm('确定强制驳回需求确认书吗?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'error',
      }).then(() => {
        this.companyList.id = id;
        this.dialogDisVisible = true
      }).catch(() => {

      });

    },
    async exportItem (row) {
      this.loading = true
      await this.$refs.requirementReport.word(row.id, row.apply_company_code)
      this.$tips.success('导出完成')
      this.init();
      this.loading = false
    },
    downLoadItem (fileUrl) {
      window.open(fileUrl)
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  filters: {
    f_submitTtypeRename: f_submitTtypeRename
  }
}
</script>
<style scoped>
.el-table__body-wrapper::-webkit-scrollbar {
  width: 8px; /*滚动条宽度*/
  height: 8px; /*滚动条高度*/
}
.el-table__body-wrapper::-webkit-scrollbar-track {
  border-radius: 10px; /*滚动条的背景区域的圆角*/
  -webkit-box-shadow: inset 0 0 6px rgba(238, 238, 238, 0.3);
  background-color: #eeeeee; /*滚动条的背景颜色*/
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px; /*滚动条的圆角*/
  -webkit-box-shadow: inset 0 0 6px rgba(145, 143, 0143, 0.3);
  background-color: rgb(145, 143, 143); /*滚动条的背景颜色*/
}
</style>
